<template>
    <div class="fxn-body">
        <div class="fxn-tabs">
            <el-tabs v-model="activeName" @tab-click="handleTab">
                <el-tab-pane v-for="(item,index) in tabData" :label="item.label" :name="item.value"></el-tab-pane>
            </el-tabs>
        </div>
        <!-- Tabs End -->
        <div class="fxn-top fxn-margin-20-0">
            <el-button type="danger" icon="Plus" @click="handleOp(1)">添加</el-button>
        </div>
        <!-- Top End -->
        <div class="fxn-section">
            <el-table :data="listData" row-key="id" border default-expand-all :tree-props="{ children: 'children' }">
                <el-table-column label="菜单名称" prop="title" />
                <el-table-column label="排序" prop="sort" width="80">
                    <template #default="scope">
                        <el-input v-model="scope.row.sort" placeholder="请输入排序号" @blur="handleSort(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="菜单地址" prop="path" />
                <el-table-column label="icon" prop="icon" width="150" />
                <el-table-column label="状态" prop="status" width="80" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="handleStatus(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-link v-if="scope.row.spt != 2" type="danger" :underline="false" @click="handleOp(3,scope.row)">添加</el-link>
                        <el-link type="danger" :underline="false" @click="handleOp(2,scope.row)">编辑</el-link>
                        <el-link type="danger" :underline="false" @click="handleDel(scope.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Section End -->

        <!-- 操作菜单 -->
        <el-dialog v-model="opDialog" :title="opTitle" width="700" :before-close="handleOpClose">
            <el-form :model="opForm" ref="opRef" :rules="opRules" label-width="100">
                <el-form-item label="上级菜单" prop="pid">
                    <el-cascader v-model="opForm.pid" :props="formProps" :options="menuData" :show-all-levels="false" clearable :disabled="opType == 3 ? true : false"></el-cascader>
                </el-form-item>
                <el-form-item label="菜单名称" prop="title">
                    <el-input maxlength="8" v-model="opForm.title" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="菜单地址" prop="path">
                    <el-input v-model="opForm.path" placeholder="请输入菜单地址"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon">
                    <el-input v-model="opForm.icon" placeholder="请输入菜单图标"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleOpClose">取消</el-button>
                <el-button type="danger" :loading="btnLoading" @click="handleSubmit">确认</el-button>
            </template>
        </el-dialog>
        <!-- 操作菜单 End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({                
                count: 0,
                page: 0,
                perPage: 10,
                loading: false,
                listData: [],
                menuData: [],

                //Tabs
                activeName: 2,
                tabData: [
                    {value: 2, label: '管理端菜单'},
                    {value: 1, label: '业务端菜单'},
                ],

                //菜单操作
                btnLoading: false,
                opDialog: false,
                opTitle: '',
                opType: '',
                opRef: '',
                opForm: {
                    pid: '',
                    title: '',
                    path: '',
                    icon: '',
                },
                opRules: {
                    pid: [
                        { required: true, message: '请选择上级菜单', trigger: 'blur' },
                    ],
                    title: [
                        { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    ],
                    path: [
                        { required: true, message: '请输入菜单地址', trigger: 'blur' },
                    ],
                },
                formProps: {
                    checkStrictly: true,
                    label: 'title',
                    value: 'id'
                },
            })

            //Tabs
            const handleTab = (e) => {
                state.activeName = e.paneName;
                getList();
            }

            //列表
            const getList = () => {
                state.loading = true;
                proxy.$http.get('/sys/Menu/index',{type: state.activeName})
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.listData = data;
                    }
                })
            }

            //菜单操作
            const handleOp = (type,row) =>{
                state.opType = type;
                //type(1=创建; 2=编辑)
                let query = {};
                if(type == 1 || type == 3){
                    query = {id: '', type: state.activeName};
                    state.opForm = {};
                    state.opTitle = '创建菜单';
                }else{
                    query = {id: row.id, type: state.activeName};
                    state.opTitle = '编辑菜单';
                }
                proxy.$http.get('/sys/Menu/op',query)
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        if(type == 1){
                            state.menuData = data._menus_;
                        }else if(type == 2){
                            state.opForm = data;
                            state.menuData = data._menus_;
                        }else{
                            state.opForm.pid = row.id;
                            state.menuData = data._menus_;
                        }
                    }
                })               
                state.opDialog = true;
            }

            //提交菜单操作
            const handleSubmit = () =>{
                state.opRef.validate((valid) => {
                    if(valid){
                        state.opForm.type = state.activeName;
                        if(state.opType != 3){
                            state.opForm.pid = state.opForm.pid[state.opForm.pid.length-1];
                        }
                        proxy.$http.post('/sys/Menu/op',state.opForm)
                        .then(res=> {
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                state.opDialog = false;
                                proxy.$refs.opRef.resetFields();
                                proxy.$msg.success('提交成功!');
                                getList();
                            }
                        })
                    }
                })
            }

            //关闭菜单操作
            const handleOpClose = () =>{
                state.opDialog = false;
                proxy.$refs.opRef.resetFields();
            }

            //修改状态
            const handleStatus = (row) => {
                proxy.$http.post('/sys/Menu/state',{id: row.id, status:row.status})
                .then(res=>{
                    const { code, msg , data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('修改成功!');
                        getList();
                    }
                })
            }

            //修改排序
            const handleSort = (row) =>{
                proxy.$http.post('/sys/Menu/index',{id: row.id, action: 'sort', sort:row.sort})
                .then(res=>{
                    const { code, msg , data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('修改成功!');
                        getList();
                    }
                })
            }

            //删除
            const handleDel = (row) => {
                proxy.$confirm("此操作将会删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(async () => {
                    proxy.$http.post('/sys/Menu/remove',{id: row.id})
                    .then(res=> {
                        let { code, msg, data } = res;
                        if(code != 1){
                            return proxy.$msg.error(msg);
                        }else{
                            proxy.$msg.success('删除成功!');
                            getList();
                        }
                    })
                })
                .catch(() => {})
            }

            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                handleOp,
                handleSubmit,
                handleOpClose,
                handleStatus,
                handleSort,
                handleDel,
                
                //组件方法
                handleTab,
            }
        },
    })
</script>

<style scoped>
    .fxn-menu{
        width: 100%;
        display: flex;
        overflow: hidden;
    }

    .fxn-menu .item{
        margin-right: 20px;
        width: 50%;
        padding: 20px;
        background: #FFFFFF;
    }

    .fxn-menu .item:last-child{
        margin-right: 0;
    }

    .fxn-menu .item .title{
        font-size: 24px;
    }

    .fxn-menu .item .tree-node{
        float: right;
    }

    .fxn-menu .item .tree-node .el-link{
        margin-right: 8px;
    }
</style>